//PureComponent内在自己底层实现了一个shouldComponentUpdate,
// 须配合immutable.js来使用（否则容易出现问题）
import React ,{PureComponent}from 'react'
import {
    HomeWrapper,
    HomeLeft,
    HomeRight,
} from './style'
import {connect} from "react-redux";
import {actionCreators} from './store';
import List from './components/List';
import QrCode from './components/QrCode';
import Recommend from './components/Recommend';
import Writer from './components/Writer';
import Topic from './components/Topic';
import BackTop from './components/BackTop';

class Home extends PureComponent {
    render() {
        return (
            <HomeWrapper>
                <HomeLeft>
                    <img className='banner-img'
                         src="https://upload.jianshu.io/admin_banners/web_images/4660/224da83c76e01d5deff07e163615921233af5c82.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
                         alt=""/>
                    <Topic/>
                    <List/>
                </HomeLeft>
                <HomeRight>
                    <Recommend/>
                    <QrCode/>
                    <Writer/>
                </HomeRight>
                {this.props.showScroll ? <BackTop/> : null}
            </HomeWrapper>
        )
    }

    componentDidMount() {
        this.props.changeHomeData();
        window.addEventListener('scroll', this.props.bindHandleScroll)
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.props.bindHandleScroll)
    }
};
const mapState = (state) => ({
    showScroll: state.getIn(['home', 'showScroll'])
});
const mapDispatch = (dispatch) => ({
    bindHandleScroll(event) {
        // 滚动的高度
        // document.documentElement.scrollTop 获取滚动栏的数值
        const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false)
            || window.pageYOffset
            || (event.srcElement ? event.srcElement.body.scrollTop : 0);
        /*  // 判断用户当前是否进行了横向滚动，如果用户发生了横向滚动，则设置元素为static
          const scrollLeft = (event.srcElement ? event.srcElement.documentElement.scrollLeft : false)
              || window.pageXOffset
              || (event.srcElement ? event.srcElement.body.scrollLeft : 0);*/
        if (scrollTop > 400) {
            dispatch(actionCreators.bindHandleScroll(true));
        } else {
            dispatch(actionCreators.bindHandleScroll(false));
        }
    },
    changeHomeData() {
        dispatch(actionCreators.getHomeInfo());
    }
});
export default connect(mapState, mapDispatch)(Home)
